<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022-8-10</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .footer,
        .header {
            width: 1200px;
            height: 80px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            color: #fff;
        }

        .footer {
            height: 300px;
            font-size: 100px;
        }

        .content {
            width: 1200px;
            padding: 10px 0;
            margin: 0 auto;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        li {
            width: 280px;
            border: 1px solid #333;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

        li>img {
            width: 280px;
            height: 320px;
            display: block;
        }

        li>p {
            padding-left: 10px;
            padding-top: 10px;
        }
    </style>
</head>

<body>

    <div class="header">网页头部</div>
    <div class="content">
        <ul>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg"
                    alt="">
                <p>2020西太湖国际音乐节</p>
                <p>城市: 常州</p>
                <p>地址: 常州西太湖中国花卉博览景区北门</p>
                <p>价格: 199-399</p>
                <p>演出时间: 2020.09.19-09.20</p>
            </li>
        </ul>
    </div>
    <div class="footer">网页底部</div>
    <script src="./data.js"></script>
    <script>
        //获取元素 
        var ul = document.querySelector('ul');
        var str = '';//拼接字符串
        list.forEach(function (item) {//item = {name:"2020西太湖国际音乐节"...}
            //item跑一次就可以获取到里面的键名和键值
            str += `<ul>
                        <li>
                            <img src= '${item.pic}'
                                alt=''>
                            <p>${item.name}</p>
                            <p>${item.showTime}</p>
                            <p>${item.price}</p>
                            <p>${item.city}</p>
                            <p>${item.addres}</p>
                        </li>
                    </ul>
            `
        });
        ul.innerHTML = str;

    </script>

</body>

</html>